<template>
<view class="tab-container">
	<view class="tab" :tt:for="tabItem" tt:key="index" @tap="goFilter" :data-title="item[0]" :data-category="item[2]">
		<image class="tab-img" :src="item[1]" mode="widthFix"></image>
		<view class="tab-text">
			<text>{{item[0]}}</text>
		</view>
	</view>
</view>
</template>

<script>

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    tabItem: {
      type: Array,
      default: []
    }
  },
  mounted: function () {},
  methods: {
    goFilter(e) {
      const title = e.currentTarget.dataset.title;
      const category = e.currentTarget.dataset.category;
      console.log(category);
      tt.navigateTo({
        url: `/pages/card/filter/filter?title=${title}&category=${category}`,

        success(res) {// 跳转成功
        },

        fail(res) {
          tt.showToast({
            title: '跳转失败',
            success: res => {}
          });
          console.log(res);
        }

      });
    }

  }
};
</script>
<style>
.tab {
    width: 20%;
    float: left;
    margin: 0 auto;
}
.tab-img {
    width: 70%;
    margin-left: 15%;
    border-radius: 50%;
    overflow:hidden;
    border: 0 solid #ff0000;
    display: flex;
    text-align: center;
}
.tab-text {
  width: 100%;
  text-align: center;
}

.tab-container {
  justify-content: center;
  overflow: auto;
  height: 100%;
  background: #fff;
}
</style>